<template>
  <div>
    <div style="visibility:hidden;min-height: 29px;"></div>
    <el-tabs tab-position="left"  v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="本科" name="first">
         <el-row>
           <el-col :span="22" style="text-align: left;">
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox-button @change="handleCheckedChange(item)" :span="1" v-for="item in undergraduateList"
              :label="item.id" :key="item.id">
              {{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
         </el-row>
        </el-tab-pane> 
       <el-tab-pane label="专科" name="second">
         <el-row>
         <el-col :span="22" style="text-align: left;">
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox-button @change="handleCheckedChange(item)" :span="1" v-for="item in specialtyList"
              :label="item.id" :key="item.id">{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
         </el-row>
        </el-tab-pane>
     </el-tabs>
    <!-- <div class="gdap-undergraduate">
      <el-row>
        <el-col :span="2">
          <span>本科</span>
        </el-col>
        <el-col :span="22" style="text-align: left;">
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox-button @change="handleCheckedChange(item)" :span="1" v-for="item in undergraduateList"
              :label="item.id" :key="item.id">
              {{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div>
    <div class="gdap-junior">
      <el-row>
        <el-col :span="2">
          <span>专科</span>
        </el-col>
        <el-col :span="22" style="text-align: left;">
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox-button @change="handleCheckedChange(item)" :span="1" v-for="item in specialtyList"
              :label="item.id" :key="item.id">{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </div> -->
    <hr />
    <div class="gdap-profession">
      <el-row style="margin-bottom:5px">
        <el-col :span="5" :offset="2">
          <el-input size="small" placeholder="请输入内容" v-model="key_name">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>
      <!-- <el-row v-show="selectedMayjorList.length<=0" style="margin-bottom:5px">
        <el-col :span="5" :offset="2">
          <div style="visibility:hidden;min-height: 32px;"></div>
        </el-col>
      </el-row> -->



      <el-row>
        <el-col :span="2">
          <span>专业</span>
        </el-col>
        <el-col :span="22" style="text-align: left;max-height: 163px;min-height: 163px;overflow-y: auto;">
          <el-checkbox-group :max="9" v-model="checkboxGroupMayjor" size="small" v-if="!showOne">
            <el-checkbox-button @change="selectMayjorChange(item)" v-for="item in selectedMayjorList" :label="item"
              :key="item.id">{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>

          <el-checkbox-group :max="9" v-model="checkboxGroupMayjor" size="small" v-if="showOne">
            <el-checkbox-button @change="selectMayjorChange(item)" v-for="item in selectedMayjorListCache" :label="item"
              :key="item.id" >{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
        <!-- selectedMayjorListCache -->

        <el-col v-show="selectedMayjorList.length<=0 && selectedMayjorListCache.length<=0">
          <span class="gdap-info">
            您暂未选择专业类别
          </span>
        </el-col>
        <el-col v-show="selectedMayjorList.length>0">
          <span class="gdap-info">
            &nbsp;
          </span>
        </el-col>
      </el-row>

    </div>

    <!-- <div class="gdap-checkmayjor" v-show="checkboxGroupMayjor.length>0">
      <el-row>
        <el-col :span="22" :offset="2" style="text-align: left;">
          <div class="gdap-maycontainer">
            <span v-for="item in checkboxGroupMayjor" :key="item.id"
              style="font-size: 13px;color:white;background-color: brown; padding: 0.2em;margin-right: 4px;">{{item.name}}</span>
          </div>
        </el-col>
      </el-row>

    </div>
    <div class="gdap-checkmayjor" v-show="checkboxGroupMayjor.length<=0">
      <el-row>
        <el-col :span="22" :offset="2" style="text-align: left;">
          <div style="visibility:hidden;min-height: 53px;"></div>
        </el-col>
      </el-row>

    </div> -->

    <el-row v-show="checkboxGroupMayjor.length>=9" style="margin-right: 15px;">
      <el-col :span="22" :offset="2">
        <el-alert title="最多只能选九个专业。" type="warning">
        </el-alert>
      </el-col>
    </el-row>
    <el-row v-show="checkboxGroupMayjor.length<9" style="margin-right: 15px;">
      <el-col :span="22" :offset="2">
        <div style="visibility:hidden;min-height: 37px;"></div>
      </el-col>
    </el-row>

    <div class="gdap-mayinfo" v-if="mayjorDetails.length>0">
      <h3 style="margin: 5px;text-align:left;font-weight: 400;">专业介绍</h3>
      <hr>
      <div style="text-align:left;margin-left:2px">
        <h4 style="margin: 0px;text-align:left;font-weight: 400;">专业代码:
          {{mayjorDetails[mayjorDetails.length-1].choiceNo}}</h4>
        <h5 style="margin: 0px;font-size:15px;text-align:left;font-weight: 400;">专业名称:
          {{mayjorDetails[mayjorDetails.length-1].choiceName}}</h5>
      </div>
      <div style="text-align:left;font-size:15px;margin-left:2px"
        v-html="mayjorDetails[mayjorDetails.length-1].choiceIntroduce">
      </div>
      <div>
      </div>
    </div>
    <hr />
    <div>
      <el-row>
        <el-button @click="backToHome">返回首页</el-button>
        <el-button @click="prevStep">上一步</el-button>
        <el-button @click="showResultForm" type="primary">提交</el-button>
      </el-row>
    </div>
    <el-dialog
      title="确认信息"
      :center="true"
      :visible.sync="resultFormVisible"
      width="50%"
      :append-to-body="true"
      >
      <el-row style="font-size: 20px;">
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh">
          <p>语言:<el-tag> {{language}}</el-tag></p>
        </el-col>
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh">
          <p>科类：<el-tag> {{category.label}}</el-tag>
          </p>
        </el-col>
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh" v-if="VERSION_NO === 0">
          <p>预估高考分数：<el-tag>{{score}}</el-tag></p>
        </el-col>
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh" v-else>
          <p>分数：<el-tag>{{score}}</el-tag></p>
        </el-col>
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh" v-if="VERSION_NO === 0">
          <p>预估排名为<span><el-tag style="color: red;">{{rate}}</el-tag></span>名</p>
        </el-col>
        <el-col :span="6" style=" height: 10vh; padding: 1vh;margin-top:5vh" v-else>
          <p>排名：<span><el-tag style="color: red;">{{rate}}</el-tag></span></p>
        </el-col>
      </el-row>
      <el-row style="font-size: 20px;">
        <el-col :span="24" style=" height: 10vh; padding: 1vh;">
          <p>地区：
            <el-tag v-for="item in area" :key="item.index">{{item}}</el-tag>
          </p>
        </el-col>
      </el-row>
      <el-row style="font-size: 20px;">
        <el-col :span="24" style=" height: 15vh; padding: 1vh;">
          <p>专业:
            <span v-for="item in checkboxGroupMayjor" :key="item.id"
              style="font-size: 13px;color:white;padding: 0.2em;margin-right: 4px;"><el-tag>{{item.name}}</el-tag></span> </p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
           
          </div>
        </el-col>
      </el-row>
      <el-row style="text-align:center;margin:5em">

        <el-button @click="resultFormVisible=false">取消</el-button>
        <el-button type="primary" @click="submitResultForm">提交</el-button>
      </el-row>
    </el-dialog>
  </div>

</template>
<script>
  import api from '@/utils/api'
  import {
    mapGetters
  } from 'vuex'
  import {
    categoryList,
    VERSION_NO
  } from '@/constants/constants'
  //高考当前年份,应该以服务器的时间为准
  const cutrrentYear = 2018;
  const kldm = 5;
  const yzmc = "汉语言"
  export default {
    data() {
      return {
        checkboxGroup: [],
        checkboxGroupMayjor: [], //选择的专业，最多为9个
        totalDataMayjor: [],
        undergraduateList: [],
        specialtyList: [],
        MayjorListCache: [],
        selectedMayjorListCache: [],
        showOne:false,
        mayjorList: [],
        selectedMayjorList: [],
        mayjorDetails: [],
        key_name: '',
        resultFormVisible: false,
        VERSION_NO: '',
        zyList: '',
        activeName: 'first',
        // recommendNum: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).recommendNum : ''
      }
    },
    computed: {
      ...mapGetters({
        area: 'estimate/getArea',
        language: 'estimate/getYzmc',
        category: 'estimate/getKldm',
        score: 'estimate/getZf',
        rate: 'estimate/getPx',
      }),
    },
    methods: {
      handleClick() {

      },
      backToHome() {
        this.$router.push('/')
        this.$store.state.common.stepIndex = 0
      },
      showResultForm() {
        this.resultFormVisible = true
      },
      prevStep() {
        this.$router.push('/step/choosearea')
        this.$store.dispatch('common/prevStep')
      },
      search() {
        console.log(this.key_name)
      },
      submitResultForm() {
        if (localStorage.getItem('user')) {
          if (JSON.parse(localStorage.getItem('user')).recommendNum <= 0) {
            this.$message({
              message: '您还未购买服务，即将跳转支付页面',
              type: 'warning'
            })
            setTimeout(() => {
              this.$router.push('/paymentrecord')
            }, 3000)
          } else {
            
            const zyCodeArr = []
            for (const i in this.checkboxGroupMayjor) {
              zyCodeArr.push(this.checkboxGroupMayjor[i].id)
            }
            const params = {
              areaSet: this.area.join(','),
              kldm: this.category.value,
              px: this.rate + '',
              yzmc: this.language,
              zf: this.score+'',
              zyList: zyCodeArr.join(','),
              zyListObj: this.checkboxGroupMayjor,
              userId: JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')).userId : JSON.parse(localStorage.getItem('testuser')).userId
            }
            this.$router.push('/result')
            this.resultFormVisible = false
            localStorage.setItem('estimateparam', JSON.stringify(params))
          }
        } else if (localStorage.getItem('testuser')) {
          
          const zyCodeArr = []
          for (const i in this.checkboxGroupMayjor) {
            zyCodeArr.push(this.checkboxGroupMayjor[i].id)
          }
          const params = {
            areaSet: this.area.join(','),
            kldm: this.category.value,
            px: this.rate + '',
            yzmc: this.language,
            zf: this.score+'',
            zyList: zyCodeArr.join(','),
            zyListObj: this.checkboxGroupMayjor,
            userId: JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')).userId : JSON.parse(localStorage.getItem('testuser')).userId
          }
          this.$router.push('/result')
          this.resultFormVisible = false
          localStorage.setItem('estimateparam', JSON.stringify(params))
        }
        
      },
      getMajor() {
        api({
            url: '/nceeSysMgr/rest/sendGet/analysis/rest/getZYCategories',
            method: 'get',
            params: {
              year: cutrrentYear,
              kldm: kldm,
              yzmc: yzmc
            }
          })
          .then(res => {
            if (res.status == 200) {
              this.totalDataMayjor = res.data
              for (let index = 0; index < this.totalDataMayjor.length; index++) {
                const element = this.totalDataMayjor[index];
                element.show = true
                if (element.pId == 'bk') {
                  this.undergraduateList.push(element)
                } else if (element.pId == 'zk') {
                  this.specialtyList.push(element)
                } else {
                  this.MayjorListCache.push(element)
                  this.mayjorList.push(element)
                }
              }
            }
          })
          .catch(e => {
            console.error(e)
          })
      },
      handleCheckedChange(item) {
        this.mayjorDetails = []
        var data = []
        for (let index = 0; index < this.checkboxGroupMayjor.length; index++) {
          const element = this.checkboxGroupMayjor[index];
          if (item.id * 1 != element.pId * 1) {
            data.push(element)
          }

        }
        this.checkboxGroupMayjor = data;
      },
      fnIsExist(data,target){
         if (data.length>0) {
           for (let i = 0; i < data.length; i++) {
             const element = data[i];
             if (element == target) {
               return true
               break
             }   
           }

         }
         return false 
      }
      ,
      selectMayjorChange(item) {
        console.log(item, ' check box item')
        
        if (!this.fnIsExist(this.checkboxGroup,item.pId)) {
          this.checkboxGroup.push(item.pId)
        }
        console.log(this.checkboxGroup, ' check box group')
        var item = [{
          "fieldName": "choiceNo",
          "constraint": "EQUALS",
          "fieldValue": item.id,
          "inputType": "input"
        }]
        const params = "searchCond=" + JSON.stringify(item) + "&start=0" + "&num=10";

        api({
            url: 'nceeSysMgr/rest/data/searchByCond/ChoiceInfo',
            method: 'post',
            data: params
          })
          .then(res => {
            if (res.status == 200) {}
            var data = []
            for (let i = 0; i < this.checkboxGroupMayjor.length; i++) {
              const element = this.checkboxGroupMayjor[i];
              if (element.id * 1 != item.id * 1) {

                data.push(res.data[0])
              }
            }
            this.mayjorDetails = data;

          })
          .catch(e => {
            console.error(e)
          })


      }
    },
    mounted() {
      this.getMajor()
    },
    watch: {
      checkboxGroup: function (val) {
        this.selectedMayjorList = []
        for (let index = 0; index < this.mayjorList.length; index++) {
          const element = this.mayjorList[index];
          for (let i = 0; i < val.length; i++) {
            const index_i = val[i];
            if (index_i == element.pId) {
              this.selectedMayjorList.push(element)
            }
          }
        }
      },
      key_name: function (val) {
        // this.selectedMayjorListCache
        // console.log(this.mayjorList);
        // console.log(this.MayjorListCache);
       
        if (val!=='') {
          this.showOne = true
          this.selectedMayjorListCache = []
          for (let i = 0; i < this.MayjorListCache.length; i++) {
            const i_obj = this.MayjorListCache[i];
            if (i_obj.name.search(val) != -1) {
              this.selectedMayjorListCache.push(i_obj)
            }
          }
          console.log(this.selectedMayjorListCache);
        }else{
          this.showOne = false
            this.selectedMayjorListCache = []
        }
      }
    },
  }
</script>
<style>
  .gdap-undergraduate {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .gdap-junior {
    margin-bottom: 1em
  }

  .gdap-info {
    color: rgb(175, 169, 169);
    font-size: 22px;
  }

  .gdap-checkmayjor {
    margin-top: 1em;
    margin-bottom: 1em;
    min-width: 90%;
  }

  .gdap-maycontainer {
    background-color: #fee3b5;
    padding: 1em;
    margin-right: 1em;

  }

  .gdap-mayinfo {
    width: 15%;
    height: 646px;
    background-color: #f0eeef;
    position: absolute;
    right: -15%;
    bottom: 0em;
    overflow-y: auto;


  }

  .el-checkbox-button {
    border-radius: 30px !important;
    cursor: pointer;
    min-width: 60px;
    margin: 10px 0;
  }

  .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 30px !important;

  }

  .el-checkbox-button__inner {
    border-radius: 30px !important;
    border: none;
   
  }
  .el-checkbox-group{
    margin: -12px 0;
  }
  .el-tag{
    margin:0.2em;
  }
</style>